@extends('WShop::layout')
<style>
    .mui-zhuda ul li {
        height: auto;
        overflow: hidden;
        padding: 10px 12px 5px 12px;
        background: #FFFFFF;
        margin-bottom: 10px;
    }
    .mui-zhuda ul li h3 {
        color: #4A4A4A;
        margin-bottom: 7px;
        font-size: 14px;
        line-height: normal;
    }
    .fr {
        float: right;
    }
    .mui-zhuda ul li p {
        line-height: 22px;
        margin-bottom: 5px;
    }

</style>
@section('content')
    @include('WShop::public.header')
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
        <div class="mui-scroll">

            <div class="mui-table-view mui-table-view-chevron  ">

                <div class="mui-zhuda">

                    <div class="mui-dingdan-list">
                        @if($list->isNotEmpty())
                        <ul class="mui-list-unstyled mui-clearfix tabslider yb-ul" id="pull-load">
                            @foreach($list as $item)
                                <li class="bg-fff">
                                    <a href="{{route('f_Wap_Article_Detail',['type'=>$type,'id'=>$item->id])}}" style="width:100%;">
                                        @switch($type)
                                        @case(1)
                                        <h3 style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap">
                                            <span class="fr">{{$item->created_at}}</span>“{{$item->title}}</h3>
                                        <p style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap">
                                        </p>
                                        <p style="text-align:center"><strong><span style="font-size:18px;font-family:宋体">“ {{$item->subtitle}}</span></strong></p>
                                        @break
                                        @case(2)
                                            <h3 style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">
                                                <span class="fr">{{$item->created_at}}</span>
                                                <b style=" color: red; ">[@if($item->type ==1)紧急@else普通@endif]</b>&nbsp;&nbsp;|&nbsp;&nbsp;
                                                {{$item->title}}
                                                </h3>
                                            <p style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap">
                                                {{$item->content}}
                                               </p>
                                        @break
                                        @default
                                        <h3 style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">
                                            <span class="fr">{{$item->created_at}}</span>
                                            <b style=" color: red; ">[@if($item->type ==1)紧急@else普通@endif]</b>&nbsp;&nbsp;|&nbsp;&nbsp;
                                            {{$item->title}}
                                        </h3>
                                        <p style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap">
                                            {{$item->content}}
                                        </p>
                                        @endswitch

                                    </a>
                                </li>

                            @endforeach
                        </ul>
                        @else
                            <div style="height: 110px;"></div>
                            <div class="mui-text-center">
                                <img src="{{asset(config('mall.wap_assets1').'/images/empty.png')}}" alt="" width="200">
                                <p style="margin-top: 50px;"><a href="javascript:void(0);" style="color: #fff;border: 1px solid #8a96a2;padding: 8px 24px;border-radius: 16px;background: #8a96a2;">暂无数据</a></p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('WShop::public.foot_bar')
@endsection
@push('scripts')
<script src="{{asset(config('view.plugin').'/other/day.js')}}"></script>
<script>

   var type = parseInt("{{$type}}");

     switch (type){
         case 1:
             var goodsItemTpl = '<li>' +
                 '<a href="{%url%}" >' +
                 '<h3 style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap"><span class="fr">{%created_at%}</span>“{%title%}</h3>' +
                 '<p style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap"></p>' +
                 '<p style="text-align:center"><strong><span style="font-size:18px;font-family:宋体">“ {%subtitle%}</span></strong></p>' +
                 '</a></li>'
             break;
         case 2:
             var goodsItemTpl = '<li>' +
                 '<a href="{%url%}" >' +
                 '<h3 style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"> <span class="fr">{%created_at%}</span> <b style=" color: red; ">[{%text%}]</b>&nbsp;&nbsp;|&nbsp;&nbsp;{%title%}</h3>' +
                 '  <p style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap">{%content%}</p>' +
                 '</a></li>'
             break;
         default:
             var goodsItemTpl = '<li>' +
                 '<a href="{%url%}" >' +
                 '<h3 style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"> <span class="fr">{%created_at%}</span> <b style=" color: red; ">[{%text%}]</b>&nbsp;&nbsp;|&nbsp;&nbsp;{%title%}</h3>' +
                 '  <p style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap">{%content%}</p>' +
                 '</a></li>'
             break;
     }

    var pageNum = 1;

    mui.init({
        pullRefresh : {
            container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
            up : {
                style: 'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
                color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
                height: '50px',//可选,默认50px.下拉刷新控件的高度,
                range: '100px', //可选 默认100px,控件可下拉拖拽的范围
                offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
                contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                auto: false,//可选,默认false.首次加载自动上拉刷新一次
                callback: function () {
                    pageNum = pageNum+1;
                    url = handleUrl(pageNum);
                    $.ajax({
                        type: 'get',
                        url: url,
                        dataType: 'json',
                    }).done(function (response) {
                        if(response.status){
                            data = response.data.list;
                            var len = data.length;
                            if(len<1){
                                mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                                mui('#pullrefresh').pullRefresh().disablePullupToRefresh();
                                return true;
                            }
                            for (var i=0; i<len; i++){

                                var goodsItem = goodsItemTpl;
                                var url ="{{route('f_Wap_Article_Detail')}}?type="+type+"&id="+data[i]['id'];
                                if(type == 1){
                                    goodsItem = goodsItem.replace('{%url%}',url)
                                        .replace('{%created_at%}',dayjs(parseInt(data[i]['created_at'])*1000).format('YYYY-MM-DD HH:mm:ss'))
                                        .replace('{%title%}',data[i]['title'])
                                        .replace('{%subtitle%}',data[i]['subtitle'])
                                }else{
                                    var text="";
                                    if(data[i]['type'] == 1){
                                        var text = "紧急"
                                    }else{
                                        var  text = "普通"
                                    }
                                    goodsItem = goodsItem.replace('{%url%}',url)
                                        .replace('{%created_at%}',dayjs(parseInt(data[i]['created_at'])*1000).format('YYYY-MM-DD HH:mm:ss'))
                                        .replace('{%title%}',data[i]['title'])
                                        .replace('{%text%}',text)
                                        .replace('{%content%}',data[i]['content'])
                                }
                                $("#pull-load").append(goodsItem);
                            }
                        }
                        mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);

                        mui('#pullrefresh').pullRefresh().refresh(true);

                    }).fail(function (XMLHttpRequest) {
                        tooltips('网络异常,请检查连接');

                    }).always(function () {

                    });

                }
            }
        }
    });

    function handleUrl(pageNum) {
        var url = window.location.href;
        if(url.indexOf("page_num=") >= 1){
            var u = url.split("page_num=");
        }else{
            if(url.indexOf("?") >= 1){
                url = url+"&page_num="+pageNum;
            }else{
                url = url+"?page_num="+pageNum;
            }
        }
        if(u) {
            var e = u[1].split("&");
            var d="";
            if(e.length > 1){
                for(var i=0;i<e.length-1;i++){
                    d += "&"+e[i+1];
                }
            }
            var url = u[0] + "page_num=" + pageNum+d;
        }

        return url
    }

</script>
@endpush